<template>
  <div class="tab">
    <span 
      v-for="(item,index) in schoolLife" 
      v-bind:class="activeIdx==index?'active':''" 
      v-on:click="handleTab(index)"
    >
      {{item}}
    </span>
  </div>
  <div class="cont" v-if="activeIdx==0">吃几斤？</div>
  <div class="cont" v-if="activeIdx==1">睡多久？</div>
  <div class="cont" v-if="activeIdx==2">打多久？</div>
  <div class="cont" v-if="activeIdx==3">打篮球？</div>
</template>

<script>
  export default {
    data(){        
      return {
        activeIdx:0,  // 1. 根据需求设计数据包, 0\1\2
        schoolLife:['吃饭','睡觉','打豆豆','打篮球']
      }
    },
    methods:{  
      // 3. 通过修改数据，引发视图更新   
      handleTab(n){
        this.activeIdx = n
      }
    }
  }
</script>

<style lang="scss" scoped>
.tab span{
  padding: 10px 20px;
  background-color: #d8d8d8;
  margin: 10px;
}
.tab .active{
  background-color: orange;
  color: #fff;
}
.cont{
  height: 300px;
  width: 300px;
  border: 2px solid #333;
  margin: 30px;
}
</style>